<template>
  <div class="d-flex bg-color-black">
    <div class="d-flex pt-2 pl-2 pr-2">
      <div class="box-title">▍ 设备管理</div>
      <span style="margin-left: auto;">
        <icon name="align-left" class="text-icon"></icon>
      </span>
    </div>
    <div class="com-page">
      <div class="pipeline" v-if="pipelines.length && pipelines[currentPipeline].devices.length">
        <div class="devices-title">{{ pipelines[currentPipeline].name }}</div>
        <div class="devices">
          <div class="device" v-for="(device, index) in visibleDevices" :key="index">
            <img :src="device.photo" alt="Device Photo" />
            <div class="device-text">{{ device.name }}</div>
            <div class="device-text" :style="statusStyle(device.status)">状态：{{ device.status }}</div>
          </div>
        </div>
      </div>
      <button @click="prevSlide" class="prev-btn">＜</button>
      <button @click="nextSlide" class="next-btn">＞</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPipeline: 0,
      currentSlide: 0,
      pipelines: [],
      timer: null,
      pollingTimer: null //轮询定时器
    }
  },
  created() {
    this.getData() //第一次请求数据
  },
  mounted() {
    this.startCarousel() // 在组件挂载时启动轮播
    this.startPolling() // 组件挂载后开始轮询实时获取数据
  },
  beforeDestroy() {
    this.stopCarousel() // 在组件销毁前清除定时器
    this.stopPolling() // 组件销毁前清除轮询
  },
  computed: {
    visibleDevices() {
      const start = this.currentSlide * 6
      return this.pipelines[this.currentPipeline].devices.slice(start, start + 6)
    }
  },
  methods: {
    getData() {
      this.$http
        .post('http://localhost:9999/production_line/api/device/search', {})
        .then(response => {
          const deviceData = response.data
          // console.log(deviceData)
          this.mapDevicesToPipelines(deviceData)
        })
        .catch(error => {
          console.error('Error fetching data:', error)
        })
    },
    mapDevicesToPipelines(data) {
      // 创建空的管道映射
      let pipelineMap = {
        1: { name: '手动线', devices: [] },
        2: { name: '摩西A线', devices: [] },
        3: { name: '摩西B线', devices: [] },
        4: { name: 'HELLER线', devices: [] },
        5: { name: '清洗线', devices: [] }
      }
      // 遍历每个设备，根据 productLineId 将其归入相应的生产线
      data.forEach(device => {
        if (pipelineMap[device.productLineId]) {
          pipelineMap[device.productLineId].devices.push({
            name: device.deviceName,
            photo: device.picture,
            status: device.runningState
          })
        }
      })
      // 将管道映射转化为数组形式，赋值给 this.pipelines
      this.pipelines = Object.values(pipelineMap)
      // console.log(this.pipelines)
    },
    nextSlide() {
      const currentPipelineDevices = this.pipelines[this.currentPipeline].devices.length
      if (this.currentSlide < Math.ceil(currentPipelineDevices / 6) - 1) {
        this.currentSlide++
      } else {
        this.currentSlide = 0
        this.nextPipeline()
      }
    },
    prevSlide() {
      if (this.currentSlide > 0) {
        this.currentSlide--
      } else {
        this.prevPipeline()
      }
    },
    nextPipeline() {
      this.currentPipeline = (this.currentPipeline + 1) % this.pipelines.length
    },
    prevPipeline() {
      this.currentPipeline = (this.currentPipeline - 1 + this.pipelines.length) % this.pipelines.length
    },
    startCarousel() {
      this.timer = setInterval(() => {
        this.nextSlide()
      }, 5000) // 每10秒切换一次
    },
    stopCarousel() {
      clearInterval(this.timer)
    },
    statusStyle(status) {
      switch (status) {
        case '运行':
          return { color: '#33cea0' }
        case '维修':
          return { color: '#ff5722' }
        case '待机':
          return { color: 'orange' }
        default:
          return { color: '#c3cbde' }
      }
    },
    startPolling() {
      // 每隔10秒获取一次数据
      this.pollingTimer = setInterval(() => {
        this.getData() // 定期更新数据
      }, 10000) // 10秒更新一次
    },
    stopPolling() {
      // 清除轮询定时器
      clearInterval(this.pollingTimer)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/scss/index.scss';
.pipeline {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.devices-title {
  height: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #c3cbde;
}

.devices {
  height: 90%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.device {
  margin: 10px;
  text-align: center;
  flex-basis: calc(33.33% - 20px);
}

.device img {
  width: 7rem;
  height: 7rem;
  // width: 90%;
  // aspect-ratio: 1 / 1; /* 保持宽高比为 5:7 */
  // object-fit: cover; /* 确保图片在容器内适应 */
  border: 2px solid #c3cbde;
}

// .device-text {
//   padding-top: 1rem;
//   font-size: 1rem;
// }

.prev-btn,
.next-btn {
  position: absolute;
  top: 50%;
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
}

.prev-btn {
  left: 10px;
  color: #c3cbde;
}

.next-btn {
  right: 10px;
  color: #c3cbde;
}
</style>
